<template>
  <!-- 项目台账高级搜索 -->
  <div ref="container">
    <a-form @submit="handleSubmit" :form="form" :bordered="false">
      <a-modal width="60%" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
        <template slot="footer">
          <a-button key="cancel" class="common-btn" @click="handleCancel">取消</a-button>
          <a-button key="submit" class="common-btn" @click="handleSubmit">搜索</a-button>
        </template>
        <a-card :bordered="false" class="card-common">
          <a-row clss="form-row" :gutter="16">
            <a-col :lg="24" :md="12" :sm="24">
              <a-form-item class="spec-item" label="行政区域">
                <div style="display:flex;">
                  <a-form-item>
                    <a-select v-decorator="['queryParam.provice', {initialValue: '山西省', rules: [{required: false, message: ''}]}]" style="width: 135px;">
                      <a-select-option value="山西省">山西省</a-select-option>
                      <a-select-option value="山东省">山东省</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select v-decorator="['queryParam.municipal', {initialValue: '太原市', rules: [{required: false, message: ''}]}]" style="width: 135px;">
                      <a-select-option value="市">市</a-select-option>
                      <a-select-option value="太原市">太原市</a-select-option>
                      <a-select-option value="未知市">未知市</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select v-decorator="['queryParam.county', {initialValue: '小店区', rules: [{required: false, message: ''}]}]" style="width: 135px;">
                      <a-select-option value="县（区）">县（区）</a-select-option>
                      <a-select-option value="小店区">小店区</a-select-option>
                      <a-select-option value="未知区">未知区</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select v-decorator="['queryParam.village', {initialValue: '小店乡', rules: [{required: false, message: ''}]}]" style="width: 130px;">
                      <a-select-option value="乡（镇/街道）">乡（镇/街道）</a-select-option>
                      <a-select-option value="小店乡">小店乡</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select v-decorator="['queryParam.burg', {initialValue: '小店村', rules: [{required: false, message: ''}]}]" style="width: 120px;">
                      <a-select-option value="村（社区）">村（社区）</a-select-option>
                      <a-select-option value="村">村</a-select-option>
                    </a-select>
                  </a-form-item>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row clss="form-row" :gutter="16">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="用户名称">
                <a-input v-model="queryParam.name" placeholder="用户名称" style="width:100%;"/>
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="身份证号">
                <a-input v-model="queryParam.identity" placeholder="身份证号" style="width:100%;"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row clss="form-row" :gutter="16">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="用户类型">
                <a-select v-decorator="['queryParam.path', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 100%;">
                  <a-select-option value="1">煤改电</a-select-option>
                  <a-select-option value="2">煤改气</a-select-option>
                  <a-select-option value="3">集中供暖</a-select-option>
                  <a-select-option value="4">其他</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="所属项目">
                <a-input placeholder="所属项目" v-decorator="['queryParam.owner', {initialValue: '', rules: [{required: false, message: ''}]}]" style="width: 100%;"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row clss="form-row" :gutter="16">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item label="户主联系电话">
                <a-input placeholder="户主联系电话" v-decorator="['queryParam.tel', {rules: [{required: false, message: '户主联系电话' }]}]" style="width: 100%" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-modal>
    </a-form>
  </div>
</template>

<script>
// import { getSupplierList } from '@/api/mockdata'
export default {
  name: 'DetailsModel',
  components: {
  },
  data () {
    return {
      form: this.$form.createForm(this),
      visible: false,
      loading: false,
      confirmLoading: false,
      // 查询参数
      queryParam: {}
    }
  },
  created () {
    this.loading = true
  },
  methods: {
    add () {
      this.visible = true
    },
    toSearch (status) {
      this.loading = true
      this.getData(status)
    },
    handleSubmit () {
      const that = this
      this.$confirm({
        title: '确认按当前条件搜索吗',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$emit('closeModel')
          that.visible = false
        }
      })
    },
    handleCancel () {
      this.visible = false
    }
  }
}

</script>

<style lang="less" scoped>
.card-common {
  margin-bottom: 0px;
}
.spec-item {
  margin-bottom: 0px;
}
/deep/.ant-card-body {
  padding: 24px 24px 0;
}
// /deep/.ant-form-item {
//   margin-bottom: 0px;
// }
</style>
